<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="商机创建时间">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="人员部门">
                                <el-cascader
                                    :props="props"
                                    :show-all-levels="false"
                                    :options="departMember"
                                    style="width: 100%;"
                                    @change="handleMemberChange"
                                />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6">
                            <el-form-item label="商机阶段">
                                <el-select v-model="form.status" placeholder="请选择" style="width: 100%;">
                                    <el-option label="匹配方案" :value="0" />
                                    <el-option label="强调优势" :value="1" />
                                    <el-option label="签订合同" :value="2" />
                                    <el-option label="进行审批" :value="3" />
                                    <el-option label="银行放款" :value="4" />
                                    <el-option label="回款" :value="5" />
                                    <el-option label="赢单" :value="6" />
                                    <el-option label="输单" :value="7" />
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="name" fixed label="员工名称" />
                <el-table-column prop="xinzeng" fixed sortable label="新增商机" width="110" />
                <el-table-column prop="pipei" sortable label="匹配方案" width="110" />
                <el-table-column label="强调优势">
                    <el-table-column prop="qiangdiao" sortable label="转化数" width="90" />
                    <el-table-column prop="qiangdiao_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="qqiangdiao_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
                <el-table-column label="订单合同">
                    <el-table-column prop="qianding" sortable label="转化数" width="90" />
                    <el-table-column prop="qianding_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="qianding_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
                <el-table-column label="进件审批">
                    <el-table-column prop="tiaojian" sortable label="转化数" width="90" />
                    <el-table-column prop="tiaojian_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="tiaojian_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
                <el-table-column label="银行放款">
                    <el-table-column prop="fangdai" sortable label="转化数" width="90" />
                    <el-table-column prop="fangdai_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="fangdai_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
                <el-table-column label="汇款">
                    <el-table-column prop="huikuan" sortable label="转化数" width="90" />
                    <el-table-column prop="huikuan_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="huikuan_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
                <el-table-column label="赢单">
                    <el-table-column prop="yingdan" sortable label="转化数" width="90" />
                    <el-table-column prop="yingdan_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="yingdan_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
                <el-table-column label="输单">
                    <el-table-column prop="shudan" sortable label="转化数" width="90" />
                    <el-table-column prop="shudan_rate" sortable label="转化率" width="90" />
                    <el-table-column prop="shudan_day" sortable label="转化速度（天）" width="150" />
                </el-table-column>
            </el-table>
        </page-main>
    </div>
</template>

<script>
import { shangjizhuanhua } from '@/api/analysis'
import { departMember } from '@/api/system'
export default {
    name: 'List',
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                type: '1',
                start: '',
                end: '',
                memberIds: ''
            },
            props: { multiple: true, value: 'id', label: 'name', children: 'child' },
            departMember: [],
            dataList: []
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.start = '';
            this.search.end = '';
            this.search.memberIds = '';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            shangjizhuanhua(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        },
        // 获取 options
        getOptions() {
            departMember().then(res => {
                this.departMember = res.data.list || []
            })
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''
        },
        handleMemberChange(e) {
            if (e.length) {
                let arr = [];
                e.forEach(item => {
                    arr.push(item[item.length - 1])
                })
                this.search.memberIds = arr.join(',')
            } else {
                this.search.memberIds = []
            }
        }
    }
}
</script>
